<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>
      Hidden images - Lazyload demos
    </title>
    <style>
      ul,
      li {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      a,
      img {
        display: block;
      }

      img {
        border: 0;
        width: 220px;
        height: 280px;
      }

      img:not([src]) {
        visibility: hidden;
      }

      .dnone {
        display: none;
      }

      .vhidden {
        visibility: hidden;
      }

      .o0 {
        opacity: 0;
      }

      /* Fixes Firefox anomaly during image load */
      @-moz-document url-prefix() {
        img:-moz-loading {
          visibility: hidden;
        }
      }
    </style>
  </head>

  <body>
    <h1>Hidden images demo</h1>
    <div id="results1" class="results">
      <ul>
        <li>
          <p>1. Visible and eagerly loaded</p>
          <a href="#1"
            ><img
              alt="Stivaletti"
              src="./images/440x560-01.webp"
              width="220"
              height="280"
          /></a>
        </li>
        <li>
          <p>2. Visible and eagerly loaded</p>
          <a href="#2"
            ><img
              alt="Open toe"
              src="./images/440x560-02.webp"
              width="220"
              height="280"
          /></a>
        </li>
        <li>
          <p>3. Visible and lazily loaded</p>
          <a href="#3"
            ><img
              alt="Sneakers &amp; Tennis"
              class="lazy"
              data-src="./images/440x560-03.webp"
              width="220"
              height="280"
          /></a>
        </li>
        <li>
          <p>4. Hidden with <code>display: none</code> on the image</p>
          <a href="#4"
            ><img
              alt="Sneakers &amp; Tennis shoes basse"
              class="lazy dnone"
              data-src="./images/440x560-04.webp"
              width="220"
              height="280"
          /></a>
        </li>
        <li>
          <p>5. Hidden with <code>display: none</code> on the link</p>
          <a href="#5" class="dnone"
            ><img
              alt="Sneakers &amp; Tennis shoes alte"
              class="lazy"
              data-src="./images/440x560-05.webp"
              width="220"
              height="280"
          /></a>
        </li>
        <li>
          <p>6. Hidden with <code>visibility: hidden</code> on the image</p>
          <a href="#6"
            ><img
              alt="Sneakers &amp; Tennis shoes alte"
              class="lazy vhidden"
              data-src="./images/440x560-06.webp"
              width="220"
              height="280"
          /></a>
        </li>
        <li>
          <p>7. Hidden with <code>visibility: hidden</code> on the link</p>
          <a href="#7" class="vhidden"
            ><img
              alt="Sneakers &amp; Tennis shoes basse"
              class="lazy"
              data-src="./images/440x560-07.webp"
              width="220"
              height="280"
          /></a>
        </li>
        <li>
          <p>8. Hidden with <code>opacity: 0</code> on the image</p>
          <a href="#8"
            ><img
              alt="Sneakers &amp; Tennis shoes basse"
              class="lazy o0"
              data-src="./images/440x560-08.webp"
              width="220"
              height="280"
          /></a>
        </li>
        <li>
          <p>9. Hidden with <code>opacity: 0</code> on the link</p>
          <a href="#9" class="o0"
            ><img
              alt="Stivali"
              class="lazy"
              data-src="./images/440x560-09.webp"
              width="220"
              height="280"
          /></a>
        </li>
        <li>
          <p>10. Visible and lazily loaded, again</p>
          <a href="#10"
            ><img
              alt="Stivali"
              class="lazy"
              data-src="./images/440x560-10.webp"
              width="220"
              height="280"
          /></a>
        </li>
      </ul>
    </div>
    <script src="../dist/lazyload.min.js"></script>
    <script>
      (function () {
        function logElementEvent(eventName, element) {
          console.log(Date.now(), eventName, element.getAttribute("data-src"));
        }

        var callback_enter = function (element) {
          logElementEvent("🔑 ENTERED", element);
        };
        var callback_exit = function (element) {
          logElementEvent("🚪 EXITED", element);
        };
        var callback_loading = function (element) {
          logElementEvent("⌚ LOADING", element);
        };
        var callback_loaded = function (element) {
          logElementEvent("👍 LOADED", element);
        };
        var callback_error = function (element) {
          logElementEvent("💀 ERROR", element);
          element.src =
            "./images/440x560-Error.webp";
        };
        var callback_finish = function () {
          logElementEvent("✔️ FINISHED", document.documentElement);
        };
        var callback_cancel = function (element) {
          logElementEvent("🔥 CANCEL", element);
        };

        window.LL = new LazyLoad({
          threshold: 0,
          // Assign the callbacks defined above
          callback_enter: callback_enter,
          callback_exit: callback_exit,
          callback_cancel: callback_cancel,
          callback_loading: callback_loading,
          callback_loaded: callback_loaded,
          callback_error: callback_error,
          callback_finish: callback_finish
        });
      })();
    </script>
  </body>
</html>
